<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>视频管理</title>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="static/assets/images/logo-header-05.png"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="static/assets/css/libs/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="static/assets/fonts/ionicons-2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="static/assets/css/libs/slick/slick.css">
    <link rel="stylesheet" type="text/css" href="static/assets/css/libs/magnific-popup/magnific-popup.css">
    <link rel="stylesheet" type="text/css" href="static/assets/style.css">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/js/layui/css/layui.css" media="all">
    <script type="text/javascript" src="static/js/vendor/jquery-2.2.4.min.js" charset="utf-8"></script>
</head>
<body>
<div id="wrapper-container">

    <!--    <header class="site-header sticky-header layout-2" th:replace="search/header::header">-->
    <!--    </header>-->

    <div id="main-content" style="min-height: 500px">
        <div class="layui-btn-container" style="margin: 30px 0 0px 20px;margin-bottom:-10px;">
            <button class="layui-btn layui-btn-sm" id="uploadFileBtn">上传文件</button>
            <button class="layui-btn layui-btn-sm" onclick="window.location.reload()">刷新表格</button>
            <button class="layui-btn layui-btn-sm" id="getUploadFileDataBtn">获取当前实例中文件数据</button>
        </div>
        <table id="fileList" lay-filter="fileList"></table>
        <div style="margin: 20px 50px;display: none;" id="webupload_box">
            <div id="file_table_box"></div>

        </div>


        <fieldset class="layui-elem-field layui-field-title" style="margin: 10px 10%; margin-top: 50px;">
            <legend style="margin-left: 10%"><a id="topTip">设置视频标题</a></legend>
        </fieldset>

        <form class="layui-form" action="" lay-filter="example" style="margin: 10px 10%">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="text" name="id" style="background-color: #e3e3e3" disabled="disabled"
                           autocomplete="off" placeholder="自动获取id"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="text" name="originName" style="background-color: #e3e3e3" disabled="disabled"
                           autocomplete="off" placeholder="原文件名称"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="text" name="searchKey" id="searchKey" lay-verify="title" autocomplete="off"
                           placeholder="请输入视频标题（搜索关键字）"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="text" name="imgId" id="imgId" lay-verify="title" autocomplete="off"
                           placeholder="视频关联图片id"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <div class="layui-input-block">
                    <div id="demo2"></div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <!--                <div class="layui-input-block">-->
                <!--                    <textarea placeholder="请输入视频故事" class="layui-textarea" name="desc"></textarea>-->
                <!--                </div>-->

            </div>
            <div class="layui-form-item" style="float: right">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="img_show" style="max-width: 500px">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" style="float: right; margin-right: 10%" class="layui-btn layui-btn-normal"
                            id="LAY-component-form-getval">修改并开始转码
                    </button>
                    <!--                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="img_show"></button>-->
                </div>
            </div>
        </form>

    </div>

    <footer class="site-footer layout-1" th:replace="search/footer::footer">

    </footer>
</div>

<script src="static/assets/js/libs/bootstrap/popper.js" charset="utf-8"></script>
<script src="static/assets/js/libs/bootstrap/bootstrap.min.js" charset="utf-8"></script>

<script src="static/assets/js/libs/magnific-popup/jquery.magnific-popup.min.js" charset="utf-8"></script>

<script src="static/assets/js/libs/slick/slick.min.js" charset="utf-8"></script>

<script src="static/assets/js/libs/isotope/isotope.pkgd.min.js" charset="utf-8"></script>

<script src="static/assets/js/libs/select2/select2.min.js" charset="utf-8"></script>

<script src="static/assets/js/thim-custom.js" charset="utf-8"></script>
<script src="static/js/layui/layui.js" charset="utf-8"></script>
<script src="static/assets/js/dist/xm-select.js" charset="utf-8"></script>
<script type="text/javascript" th:inline="none">
    var dataMaps = new Map();
    var domain = window.location.protocol + "//" + window.location.host;
    layui.config({
        base: domain + '/static/js/layui_exts'
    }).extend({
        layWebupload: '/webupload/layWebupload'
    });
    layui.use(['table', 'layWebupload'], function () {
        var table = layui.table;
        var layWebupload = layui.layWebupload;
        var layWebuploadIns;
        var url = domain + "/upload/fileRecord/"
        console.log("layWebupload:", layWebupload)
        //第一个实例
        table.render({
            elem: '#fileList'
            , method: "post"
            // ,height: 312
            , url: url + 'getList' //数据接口
            , page: true //开启分页
            , cols: [[
                {field: 'id', title: 'ID', width: 190}
                , {field: 'orgName', title: '原文件名', width: 450}
                , {
                    field: 'networkPath', title: '图片(点击放大)', width: 150, align: 'center', templet:
                        function (d) {
                            console.log(d);
                            dataMaps.set(d.id, d);
                            var url = d.networkPath;
                            if (d.fileType === 'image') {
                                return '<div onclick="show_img(this)" ><img  id="' + d.id + '" style="height:50px;width:50px;" src="' + url + '"></div>'
                            }
                            if (d.fileType === 'video') {
                                return '<div onclick="show_video(this)" ><button type="button" id="' + d.id + '" class="layui-btn" style="line-height: 30px;font-size: 13px;height: 30px">设置视频标题 </button></div>'
                            }
                            return '<div ><a id="' + d.id + '" class="layui-btn-" style="line-height: 5px">' + d.fileType + '<button</div>'
                        }
                }
                , {
                    field: 'fileSize', width: 100, title: '大小', templet: function (d) {
                        return formatFileSize(d.fileSize);
                    }
                }
                , {field: 'createTime', title: '日期', width: 190}
                , {
                    field: 'uploadType', title: '类型', width: 120, templet: function (d) {
                        // return d.uploadType == 1 ? '普通文件' : '用户头像';
                        return '<div onclick="del_video(this)" ><button type="button" id="' + d.id + '" class="layui-btn layui-btn-danger" style="line-height: 30px;font-size: 13px;height: 30px">删除文件</button></div>'
                    }
                }
                , {field: 'serverLocalName', width: 150, title: '系统文件名'},
                {field: 'serverLocalPath', width: 400, title: '服务存储路径'}
                , {
                    field: 'networkPath', width: 500, title: '网络访问地址', templet: function (d) {
                        return domain + d.networkPath;
                    }
                }
                , {field: 'md5Value',width: 200, title: 'MD5'}
                , {field: 'uploadDevice',width: 200, title: '设备信息'}
                , {field: 'uploadIp', width: 200,title: 'IP'}
            ]]
            , request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            , response: {
                statusCode: 10000 //规定成功的状态码，默认：0
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
            , page: true
            , limits: [8, 10, 15, 30, 100, 200]
            , limit: 8
        });

        $("#uploadFileBtn").click(function () {//重点
            var fileType = ''
            //常见图片
            fileType += "gif,png,jpeg,jpg";
            //常见的视频
            fileType += "cd,wave,aife,mpeg,mp3,mpeg-4,midi,wma,realaudio,vqf,oggvorbis,amr,ape,flac,aac";
            //常见音频
            fileType += ",avi,mov,rmvb,rm,flv,mp4,3gpavi,mov,3gp"
            fileType = '*.*'
            console.log(fileType)
            layWebuploadIns = layWebupload.render({
                url: url + '/zone/upload',//上传文件服务器地址，必填
                fileCheckUrl: url + '/zone/upload/md5Check',//文件校验地址
                checkChunkUrl: url + '/zone/upload/md5Check',//文件块校验地址
                mergeChunksUrl: url + '/zone/upload/merge/',//文件合并地址
                size: 5 * 1024 * 1024 * 1024,//单个文件大小，有默认值，可不填
                fileType: fileType,//允许上传文件格式,有默认值，可不填
                fileBoxEle: "#file_table_box",//上传容器
                fileNumLimit: 500,//上限500个文件
                // headers:{//headers参数传递,根据自己需要添加
                //     Authorization:new Date().getTime()
                // }
            });
            openEditPanel("文件上传", "webupload_box")
        });
        /**
         * 获取实例中上传数据
         ***/
        $("#getUploadFileDataBtn").click(function () {
            if (layWebuploadIns != null && layWebuploadIns != undefined) {
                var nowData = layWebuploadIns.getData();
                layer.alert("已经在控制台打印了，请按F12查看");
                console.log("当前实例中数据:", nowData)
            } else {
                layer.alert("没有上传文件，请先上传文件");
            }
        });
        $("#printUploadFileDataBtn").click(function () {
            if (layWebuploadIns != null && layWebuploadIns != undefined) {
                var nowData = layWebuploadIns.getData();
                layer.alert("已经在控制台打印了，请按F12查看");
                console.log("当前实例中数据:", nowData)
            } else {
                layer.alert("没有上传文件，请先上传文件");
            }
        });

        function formatFileSize(size) {
            var fileSize = 0;
            if (size / 1024 > 1024) {
                var len = size / 1024 / 1024;
                fileSize = len.toFixed(2) + "MB";
            } else if (size / 1024 / 1024 > 1024) {
                var len = size / 1024 / 1024;
                fileSize = len.toFixed(2) + "GB";
            } else {
                var len = size / 1024;
                fileSize = len.toFixed(2) + "KB";
            }
            return fileSize;
        };

        /**
         * 弹窗面板
         */
        function openEditPanel(title, modelId, w, h) {
            if (title == null || title == '') {
                title = false;
            }
            ;
            if (w == null || w == '') {
                w = 'auto';
            }
            ;
            if (h == null || h == '') {
                h = 'auto';
            } else {
                h = h + "px";
            }
            ;
            var index = layer.open({
                type: 1,
                area: [w + 'px', h],
                fix: false,
                maxmin: true,
                shadeClose: false,
                zIndex: 50,
                shade: 0.4,
                title: title,
                content: $("#" + modelId)
            });
            return index;
        }

    })

    function show_img(t) {
        var t = $(t).find("img");
        //页面层
        layer.open({
            type: 1,
            title: '预览',
            skin: 'layui-layer-rim', //加上边框
            area: ['80%', '80%'], //宽高 t.width() t.height()
            shadeClose: true, //开启遮罩关闭
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
        });
    }

    function show_video(t) {
        var id = $(t).find("button").attr("id");
        video(id);
    }

    function del_video(t) {
        var id = $(t).find("button").attr("id");
        $.ajax({
            type: "DELETE",
            url: "upload/fileRecord/delById/" + id,
            contentType: "json/application",
            dataType: "json",
            success: function (response) {
                if (response.success) {
                    //提示层
                    layer.alert(response.message);
                    window.location.reload();
                }
                layer.alert(response.message);
            }
        });
    }

    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/upload/fileRecord/upload?uploadType=8' //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    console.log(result);
                    $('#img_show').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {

                if (res.success) {
                    $('#img_show').attr('src', res.data.network);
                    $('#imgId').val(res.data.fileId).attr("disabled", "disabled");
                    return;
                }
                return layer.msg('上传失败');
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });

    function getImgSrc(imgId) {
        $.ajax({
            type: "GET",
            url: "/upload/fileRecord/" + imgId,
            contentType: "json/application",
            dataType: "json",
            success: function (response) {
                if (response.success) {
                    $('#img_show').attr('src', response.data.networkPath);
                    // $("#img_show").height("00px");
                    $('#imgId').attr("disabled", "disabled");
                    return;
                }
                layer.alert(response.message);
            }
        });
    }

    function video(id) {
        $("#searchKey").focus();
        $("#topTip").css("background-color", "#ff5733");
        var data = dataMaps.get(id);
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;


            //监听提交
            form.on('submit(img_show)', function (data) {
                layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                })
                return false;
            });
            //表单赋值
            form.val('example', {
                "searchKey": data.searchKey
                , "imgId": data.imgId
                , "id": data.id
                , "originName": data.orgName
            });
            getImgSrc(data.imgId);
            getMenus(data.id);
            //表单取值
            layui.$('#LAY-component-form-getval').on('click', function () {
                var data = form.val('example');
                if (!data.id) {
                    layer.alert('没有视频唯一标识');
                    return false;
                }
                console.log(JSON.stringify(data));
                data.m3u8Transfer = 2;
                data.menus = img_show.getValue();
                $.ajax({
                    type: "POST",
                    url: "upload/fileRecord/save",
                    data: JSON.stringify(data),
                    contentType: "json/application",
                    dataType: "json",
                    success: function (response) {
                        if (response.success) {
                            //提示层
                            layer.alert(response.message);
                            form.val('example', {
                                "searchKey": ""
                                , "imgId": ''
                                , "id": ''
                                , "originName": ''
                            });
                            $("#topTip").css("background-color", "#fff");
                        }
                        layer.alert(response.message);
                    }
                });
            });

        });
    }
</script>
<script type="text/javascript">

    function getMenus(id) {

        $.ajax({
            type: "GET",
            url: "/upload/fileRecord/" + id,
            contentType: "json/application",
            dataType: "json",
            success: function (response) {
                if (response.success) {
                    setMenus(response);
                    return;
                }
                layer.alert(response.message);
            }
        });
    }

    var img_show;

    function setMenus(response) {
        img_show = xmSelect.render({
            // 这里绑定css选择器
            el: '#demo2',
            // 渲染的数据
            // data: [
            //     // {name: '水果', value: 1, selected: true, disabled: true},
            //     // {name: '蔬菜', value: 2, selected: true},
            //     // {name: '桌子', value: 3, disabled: true},
            //     {name: 'MV', value: 1},
            //     {name: '综艺', value: 2},
            //     {name: '音乐', value: 3},
            //     {name: '搞笑', value: 4},
            // ],
            data: response.data.menus
        })
    }

    // 变量, img_show 可以通过API操作
    // 获取选中值, img_show.getValue();
    // 设置选中值, img_show.setValue([{ name: '动态值', value: 999 }])
    // ...
</script>
</body>


</html>
